<template>
  <view class="myQrCode-main">
    <view class="bg-img"></view>
    <z-nav-bar class="custom-nav-bar" fontColor="#FFF" type="transparent">
      <text class="title">分享二维码</text>
    </z-nav-bar>
    <view class="info-card-main">
			<view class="profile-photo"></view>
			<view class="name">诸葛春雨</view>
			<view class="qr-code" style="background-image: url('https://www.liantu.com/images/2013/liantu.png')"></view>
      <wide-button class="blue-wide-button">
				<text class="text">分享你的二维码给好友</text>
			</wide-button>
    </view>


  </view>
</template>

<script>
  import wideButton from "@/widgets/wideButton"
  import zNavBar from "@/components/zhouWei-navBar"
  export default {
    components: {
      wideButton,
      zNavBar
    },
    data() {
      return {

      };
    }
  }
</script>

<style lang="scss" scoped>
	@import "../assets/styles/global";
	.myQrCode-main {
  
		padding-top: 0;
    .bg-img {
      background-image: url("../static/images/myQrCode/bg_img@3x.png");
      width: 100vw;
      height: 616rpx;
      @include body-background-image;
    }

    .custom-nav-bar {
      width: 100vw;

      .title {
        height: 50rpx;
        font-family: PingFangSC-Regular;
        font-size: 34rpx;
        font-weight: normal;
        font-stretch: normal;
        line-height: 50rpx;
        letter-spacing: 0rpx;
        color: #ffffff;
      }
    }

    .info-card-main {
			@include center;
			position: absolute;
			top:280rpx;
			left: 106rpx;
      width: 544rpx;
      height: 792rpx;
      background-color: #ffffff;
      box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(203, 203, 203, 0.5);
      border-radius: 20rpx;
      opacity: 0.89;
			& *{
				opacity: 1;
			}
			.profile-photo{
				width: 200rpx;
				height: 200rpx;
				background-color: black;
				position: absolute;
				top: -100rpx;
				left: 172rpx;
				border-radius: 50%;
			}
			.name{
				position: absolute;
				top: 120rpx;
				left: 50%;
				margin-left: -100rpx;
				text-align: center;
				width: 200rpx;
				height: 55rpx;
				box-sizing: border-box;
				@include ellipsis;
				font-size: 44rpx;
				font-weight: normal;
				font-stretch: normal;
				letter-spacing: 0rpx;
				color: #06121f;
			}
			.qr-code{
				position: absolute;
				top:272rpx;
				left: 72rpx;
				/*background-color: black;*/
				background-size: cover;
				width: 400rpx;
				height: 400rpx;
			}
      .blue-wide-button {
        width: 416rpx;
				position: absolute;
				bottom: -42rpx;
				left: 64rpx;
        .text {
          width: 280rpx;
          height: 32rpx;
          font-family: PingFangSC-Regular;
          font-size: 28rpx;
          font-weight: normal;
          font-stretch: normal;
          line-height: 32rpx;
          letter-spacing: 0rpx;
          color: #ffffff;
        }
      }

    }
  }
</style>
